<meta content="text/html; charset=UTF-8; X-Content-Type-Options=nosniff" http-equiv="Content-Type" />
<style type="text/css">
    #login_form {width: 250px; }
    #login_form #forgotpwd {border-bottom: 1px solid #FFF; cursor: pointer; }
    #login_form * {border: none; }
    #login_form .k-checkbox {display: table-cell; vertical-align: middle; }
    #login_form_html p {margin-bottom: 20px; }
    #login {background: #000; color: white; }
    #login_logo_top {text-align: center; border-right: 1px solid white; height: 250px; }
    #login_logo_min {float: left; margin: 30px 0 0 50px; }
    #login_copyrightLabel {position: absolute; width: 100%; bottom: 20px; color: #FFF; text-align: center; background: #000; z-index: 9; }
    #login_loginLabel {border-bottom: 2px solid #efefef; padding: 0 20px; line-height: 30px; }
    #login_signUpLabel {padding: 0 20px; line-height: 30px; }
</style>
<div id="login">
    <div class="container">
        <div class="row">
            <div class="col_7_12">
                <div class="login_logo_min" id="login_logo_min">
                    <img src="imgs/login/loginWorkportLogo.png" alt="">
                </div>
                <div class="login_logo_top" id="login_logo_top">
                    <img src="imgs/login/starbucksLogo_118x138.png" alt="" class="login_logo_big">
                    <p id="login_welcomeLabel" class="wp_fz_13"></p>
                </div>
            </div>
            <div class="col_5_12" id="login_form_html">
                <div id="login_form">
                    <p>
                        <div class="row  wp_fz_14">
                            <div class="col_1_2">
                                <div>
                                    <span id="login_loginLabel"></span>
                                </div>
                            </div>
                            <div class="col_1_2">
                                <div>
                                    <span id="login_signUpLabel"></span>
                                </div>
                            </div>
                        </div>
                    </p>
                    <p>
                        <lable for="userName">
                            <span class="wp_fz_14" id="login_userNameLabel"></span>:
                            <br>
                            <input type="text" name="userName" id="userName" maxlength="256" class="wp_w_250 wp_h_30" class="k-textbox" placeholder="User Name" required validationMessage="UserName is required" >
                        </lable>
                    </p>
                    <p>
                        <lable for="pwd">
                            <span class="wp_fz_14" id="login_pwdLabel"></span>:
                            <br>
                            <input type="password" name="pwd" id="pwd" maxlength="20" class="wp_w_250 wp_h_30 k-textbox" required validationMessage="Password is required" >
                        </lable>
                        <br>
                        <!-- <input type="checkbox" name="rember" id="rember" class="k-checkbox"> <span class="wp_fz_11" id="remberpwd"> </span> -->&nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="wp_fz_11 right" id="forgotpwd"></span>
                    </p>
                    <p>
                        <button class="btn right wp_w_80 wp_h_30" id="login_form_submit"></button>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="login_copyrightLabel"></div>


<script>
    $(function() {
        var i18n = {
            login_loginLabel: 'Login',
            login_signUpLabel: 'Sign Up',
            login_userNameLabel: 'User Name',
            login_pwdLabel: 'Password',
            login_form_submit: 'Login',
            // remberpwd: 'remberpwd',
            forgotpwd: 'Forgot password?',
            login_copyrightLabel: 'A product of Cognizant Copyright &copy; 2014',
            login_welcomeLabel: 'Lorem lpsum dolor sit amet,conseteture adlpsclng ellt.Maurls eget malesuada saplen.Nulla<br/>facllsl.Morbl dlctum blandlt dlam at facllsis.Maeceas suscplit nec metus laoreet.Donec eu<br/>lectus malesuada.laoreet dlam eu,condlmenetum nlsl.'
        };
        for (v in i18n) {
            $('#' + v).html(i18n[v]);
        }

        //calculate layout
        var login_width = Workport.utils.getViewPort().width * 5 / 12;

        var login_height = Workport.utils.getDocHeight();
        var login_form = $('#login_form');
        $('#login').css({
            height: login_height
        });
        $('#login_form').css({
            paddingLeft: (login_width - 250) / 2,
            paddingTop: (login_height - 250) / 2 - 50
        });
        $('.login_logo_top').css({
            marginTop: (login_height - 138) / 2 - 100
        });

        var login_form_validater = $("#login_form").kendoValidator().data("kendoValidator");

        $('#login_form_submit').kendoButton({
            click: function(e) {
                if (login_form_validater.validate()) {
                    var _data = {UserID:$('#userName').val(),Password:$('#pwd').val()};
                    Workport.Communication.post('Profile/Auth',function (_s,_d){
                        if(WP_LOGIN_USERVALID == _d){
                            WP_USER_ID = _data.UserID;
                            $('#tmp>*').off();
                             $('#tmp').remove();
                             Workport.utils.loadPage('html/header.tmpl.html', 'wp_header');
                             var div = document.createElement('div');
                             div.id = 'wp_body';
                             document.body.appendChild(div);
                             $(div).load('html/homepage.tmpl.html', function(data) {
                                    Workport.utils.loadPage('html/homepage.help.tmpl.html', 'wp_homepage_help');
                                    Workport.utils.loadPage('html/homepage.profile.tmpl.html', 'wp_homepage_profile');
                                    Workport.utils.loadPage('html/smartstream.tmpl.html', 'wp_homepage_smartstream');
                                    Workport.utils.loadPage('html/iwantto.tmpl.html', 'wp_homepage_iwantto');
                                    Workport.utils.loadPage('html/homepage.notifactions.tmpl.html', 'wp_homepage_notifactions');
                                    Workport.utils.loadPage('html/documents.tmpl.html','wp_homepage_documents');
                                    Workport.utils.loadPage('html/smartstream.share.tmpl.html', 'wp_smartstream_share');
                                    Workport.utils.loadPage('html/smartstream.topic.detail.tmpl.html', 'wp_smartstream_topic_detail');
                                    Workport.utils.loadPage('html/communities.tmpl.html', 'wp_communities_win');
                                    Workport.utils.loadPage('html/communities.profile.tmpl.html', 'wp_communities_profile_win');
                                    Workport.utils.loadPage('html/apps.tools.tmpl.html', 'wp_apps_tools');
                                    Workport.utils.loadPage('html/applications.add.detail.tmpl.html', 'wp_apps_add_detail');
									// Workport.utils.loadPage('html/apps.tools.register.tmpl.html', 'wp_apps_tools_register');
									// Workport.utils.loadPage('html/apps.tools.register.editlist_tmpl.html', 'wp_apps_tools_register_editlist');
									// Workport.utils.loadPage('html/applications.tools.create.tmpl.html', 'wp_apps_tools_create');
                                    // Workport.utils.loadPage('html/all.liked.users.list.win.tmpl.html', 'wp_all_like_users_list');
                                    Workport.utils.loadPage('html/iframe.window.html', 'wp_iframe_pop_win');
                                    Workport.utils.loadPage('html/contacts.main.tmpl.html', 'wp_contacts_main');
									Workport.utils.loadPage('html/contacts.add.tmpl.html', 'wp_contacts_add');
                                    Workport.utils.loadPage('html/inbox.tmpl.html', 'wp_inbox_win');
                            });
                        }else{
                             alert(WP_LOGIN_ERR);
                        }
                    },_data);
                }
            }
        });
    });
</script>